<template>
	<el-dialog title="会员充值" :visible.sync="visible" class="member-finance">
		<div class="card">
			<div class="title">会员</div>
			<div class="details">
				<el-image fit="cover" :src="message.avatar" class="avatar"></el-image>
				{{ message.nickName }}
			</div>
			<div class="title">信息</div>
			<div class="details">
				<!-- <p>姓名: {{ message.userName }}</p> -->
				<p>手机号: {{ message.phone }}</p>
			</div>
		</div>
		<el-tabs v-model="active">
			<el-tab-pane label="充值积分" name="0">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="当前积分">{{ pointNumber }}</el-form-item>
					<el-form-item label="变化">
						<el-radio-group v-model="pointFormData.type">
							<el-radio :label="item.code" v-for="(item, index) in PointsTypeList" :key="index">{{ item.name }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="充值数目">
						<el-input v-model="pointFormData.point" placeholder="请输入充值数目" type="number"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input
							v-model="pointFormData.memo"
							placeholder="请输入备注"
							type="textarea"
							:autosize="{ minRows: 3, maxRows: 5 }"
						></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="充值余额" name="1">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="当前余额">{{ balanceNumber }}</el-form-item>
					<el-form-item label="变化">
						<el-radio-group v-model="balanceFormData.type">
							<el-radio :label="item.code" v-for="(item, index) in PointsTypeList" :key="index">{{ item.name }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="充值数目">
						<el-input placeholder="请输入充值数目" type="number"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input placeholder="请输入备注" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>

		<template #footer>
			<div class="center">
				<el-button type="primary" @click="onConfirm">确定</el-button>
				<el-button @click="onCancel">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import { enumList } from "@/api/public.api.js"
import request from "@/common/request"

let callback = null

export default {
	name: "member-finance",
	data() {
		return {
			visible: false,
			message: {},
			active: "0",
			PointsTypeList: [],
			pointFormData: {
				type: "1",
				point: "",
				memo: "",
				memberId: "",
			},
			balanceFormData: {
				type: "1",
				balance: "",
				memo: "",
				memberId: "",
			},
			pointNumber: 0,
			balanceNumber: 0,
		}
	},
	computed: {},
	created() {
		enumList("PointSerialType", "member").then(resp => {
			if (resp.code == 0) {
				this.PointsTypeList = resp.data
			}
		})
	},
	methods: {
		show(row, active = "0", cb) {
			this.active = active
			this.visible = true
			this.message = row

			callback = cb

			this.getMemberInfo()
		},

		async getMemberInfo() {
			try {
				const { code, data, msg } = await request("get", `/member/memberAccount/infoByMemberId?memberId=` + this.message.id)
				if (code != 0) {
					throw new Error(msg)
				}
				this.balanceNumber = data.balance
			} catch (error) {
				this.$message.error(error.message)
			}
			try {
				const { code, data, msg } = await request("get", `/member/memberPoints/infoByMemberId?memberId=` + this.message.id)
				if (code != 0) {
					throw new Error(msg)
				}
				this.pointNumber = data.balance
			} catch (error) {
				this.$message.error(error.message)
			}
		},

		async onConfirm() {
			try {
				if (this.active == "0") {
					// if (this.pointFormData.point == "" || this.pointFormData.point < 0) {
					// 	throw new Error("请输入积分数目")
					// }
					this.pointFormData.memberId = this.message.id
					const { code, msg } = await request("post", "/member/memberPoints/changePoint", {
						type: this.pointFormData.type,
						point: this.pointFormData.point,
						memo: this.pointFormData.memo,
						memberId: this.pointFormData.memberId,
					})
					if (code != 0) {
						throw new Error(msg)
					}
				} else {
					if (this.balanceFormData.balance == "" || this.balanceFormData.balance < 0) {
						throw new Error("请输入余额数目")
					}
					this.balanceFormData.memberId = this.message.id
					const { code, msg } = await request("post", "/member/memberBalance/changeBalance", {
						type: this.variation,
					})
					if (code != 0) {
						throw new Error(msg)
					}
				}
				callback && callback()
				this.onCancel()
			} catch (error) {
				this.$message.error(error.message || "操作失败")
			}
		},
		onCancel() {
			this.pointFormData.type = "1"
			this.pointFormData.point = ""
			this.pointFormData.memo = ""
			this.balanceFormData.type = "1"
			this.balanceFormData.balance = ""
			this.balanceFormData.memo = ""
			this.visible = false
			callback = null
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.card {
	flex-direction: row;
	padding: 13px 0;
	.title {
		width: 90px;
		flex: none;
		padding-left: 25px;
		font-size: 18px;
		font-weight: 700;
	}
	.details {
		width: 40%;
		font-size: 14px;
		line-height: 2;
		.avatar {
			width: 55px;
			height: 55px;
			margin-right: 20px;
			vertical-align: top;
		}
	}
}
.center {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
